<template>
    <el-row>
        <el-col :span="8">
            <!-- user卡片 -->
            <el-card :top="20" shadow="hover">
                <div class="user">
                    <img src="../assets/images/user.png" alt="">
                    <div class="userInfo">
                        <p div class="name">Admin</p>
                        <p div class="access">超级管理员</p>
                    </div>
                </div>
                <div class="loginInfo">
                    <p>上次登录时间：<span>2024-01-01 12:00:00</span></p>
                    <p>上次登陆地点：<span>大连</span></p>
                </div>
            </el-card>
            <!-- table卡片 -->
            <el-card style="margin-top: 15%;">
              <div ref="echarts2" style="height:280px" ></div>
            </el-card>
        </el-col>
        <el-col :span="16">
          <div class="num">
            <el-card v-for="item in CountData" :key="item.name" :body-style="{ display: 'flex', padding: 0 }">
              <i class="icon" :class="`el-icon-${item.icon}`" :style="{ backgroundColor: item.color }"></i>
              <div class="details">
                <p class="price">{{item.value }}</p>
                <p class="desc">{{ item.name }}</p>
              </div>
            </el-card>
          </div>
              <live-player :videoUrl ="'rtmp://127.0.0.1:1935/live/stream'" fluent autoplay live stretch style="margin-top: 0"> </live-player>

        </el-col>
    </el-row>
</template>

<script>
import TableLabel from '../data/TableLabel'
import CountData from '../data/CountData'
import { getData } from '../api/index'
import * as echarts from 'echarts'
// echarts的配置数据
import order from '../data/echartsData/order'
import user from '../data/echartsData/user'
import video from '../data/echartsData/video'
 import LivePlayer from '@liveqing/liveplayer';

export default {
  // eslint-disable-next-line vue/no-unused-components
components: {LivePlayer},
    data() {
        return {
          userData: [  {
            date: '周一',
            new: 5,
            active: 200
          },
            {
              date: '周二',
              new: 10,
              active: 500
            },
            {
              date: '周三',
              new: 12,
              active: 550
            },
            {
              date: '周四',
              new: 60,
              active: 800
            },
            {
              date: '周五',
              new: 65,
              active: 550
            },
            {
              date: '周六',
              new: 53,
              active: 770
            },
            {
              date: '周日',
              new: 33,
              active: 170
            }],
            TableData: [],
            TableLabel,
            CountData
        }
    },
    methods: {
        priceFormate(price) {

        }
    },
    mounted() {

      const echarts2 = echarts.init(this.$refs.echarts2)
      var echarts2Option = user

      // 配置
      echarts2Option.xAxis.data = this.userData.map(item => item.date)
      echarts2Option.series = [
        {
          name: '高峰人流',
          data: this.userData.map(item => item.new),
          // 类型:bar是柱状图
          type: 'bar'
        }
        ,
        {
          name: '低峰人流',
          data: this.userData.map(item => item.active),
          type: 'bar'
        }
      ]

      echarts2.setOption(echarts2Option);



    }
}
</script>

<style lang="less" scoped>
.user {
    // 垂直居中
    display: flex;
    align-items: center;

    // 外边距:分割线距离loginInfo的距离
    margin-bottom: 20px;
    // 内边距:分割线距离User的距离
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;

    img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-right: 40px;
    }

    .userInfo {
        .name {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .access {
            color: #999999;
        }
    }
}

.loginInfo {
    p {
        line-height: 28px;
        font-size: 14px;
        color: #999999;

        span {
            color: #666666;
            margin-left: 60px;
        }
    }
}

.num {
    display: flex;
    // 要换行
    flex-wrap: wrap;
    // 从头到尾均匀排列
    justify-content: space-between;
    margin-left: 20px;

    .el-card {
        width: 32%;
        margin-bottom: 20px;

        .icon {
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            font-size: 30px;
            color: #fff;
        }

        .details {
            // 竖着排且居中
            display: flex;
            flex-direction: column;
            justify-content: center;

            margin-left: 15px;

            .price {
                font-size: 30px;
                margin-bottom: 10px;
                line-height: 30px;
                height: 30px;
            }

            .desc {
                font-size: 14px;
                color: #999;
                text-align: center;
            }
        }
    }
}

.graph {
    display: flex;
    // 两个靠边
    justify-content: space-between;
    margin-top: 20px;

    .el-card {
        width: 49%;
    }
}
</style>